<style scoped>
  @import "../css/page2.css"; /* 引入预定义变量 */
</style>

<template>
  <div id="main" class="main">
  <p class="title">数据处理</p>

  <div class="div1">
    <button type="button" v-on:click="show_up_load_dialog">数据导入</button>
    <button v-on:click="normalize_post">数据标准化</button>
  </div>



  <div id="upload_dialog" class="upload_dialog_div">
      <div class="style_content_div">
        <div class="style_content_upper_div">
          <div class="style_content_file_div">
            <span class="style_file_span">上传文件：</span>
            <input class="style_file_content" accept=".csv" type="file" id="upload_file_id">
          </div>
        </div>

        <div class="style_content_lower_div">
          <span class="style_content_span" @mouseover="mouseOver" @mouseleave="mouseLeave" v-on:click="hide_up_load_dialog">取消</span>
          <span class="style_content_span" @mouseover="mouseOver" @mouseleave="mouseLeave" v-on:click="show">确定</span>
        </div>

      </div>
  </div>

  <div class="div_but">
     <button v-on:click="go">保存</button>
  </div>


  <select id="select" class="select" @change="selection">

  </select>

  <div id="warning" class="warn">
  数据标准化中
  </div>
  <img id="myImage1" style="width:500px" :src="img1" class="im1">
  <img id="myImage2" style="width:500px" :src="img2" class="im2">

  </div>
</template>

<script>
var data;
var index;

export default{

data(){

    return{

    img1:'',
    img2:''

    }
  },

  methods:{

  /*
  显示上传文件框
  */
    show_up_load_dialog:function(){
      var up_dialog = document.getElementById("upload_dialog");
      up_dialog.style.visibility = "visible";
    },

  /*
  隐藏上传文件框
  */
    hide_up_load_dialog:function(){
      var up_dialog = document.getElementById("upload_dialog");
      up_dialog.style.visibility = "hidden";
    },

  /*
  点击确认调用，展示数据，隐藏上传文件框
  */
    show:function(){
      var reader = new FileReader();
          reader.onload = function(){
              alert("数据导入成功！");
          }
          var f = document.getElementById("upload_file_id").files[0];
          reader.readAsText(f);
          data = f.name
          this.$options.methods.hide_up_load_dialog();
    },

    extract_post:function(){
      this.$axios.post('/api/extract',[data])
      .then(function(response){
        //document.getElementById("post_treat").innerHTML = response.data['res'];
        alert(response.data['res']);
      })
    },

    normalize_post:function(){

      if(typeof(data) == "undefined" || data == '' || data == null){
         alert("请先点击数据导入按钮导入数据！");
         return;
      }

      document.getElementById("warning").style.visibility = "visible";
      index = "";

      var nameid = this.$route.query.nameId;
      if(nameid == "model_train"){
        this.$axios.post('/api/normalize',[data])
        .then(function(response){
        alert("标准化完成！");

        // 插入下拉框选项
        index = response.data['res'];
        var obj = document.getElementById("select")
        obj.options.length = 0;
        for(var i = 0; i < index.length; i++){
        obj.options.add(new Option(index[i], i+1));
        }

        //隐藏提示
        document.getElementById("warning").style.visibility = "hidden"
        })

      }

      else if(nameid == "model_predict"){
        this.$axios.post('/api/standardize',[data])
        .then(function(response){
        alert("标准化完成！");

        index = response.data['res'];
        var obj = document.getElementById("select")
        obj.options.length = 0;
        for(var i = 0; i < index.length; i++){
        obj.options.add(new Option(index[i], i+1));
        }

        document.getElementById("warning").style.visibility = "hidden"
        })
      }
    },

    go:function(){
      var nameid = this.$route.query.nameId;
      if(nameid == "model_predict"){
        this.$router.push({path:'page3', query:{idx:index}});
      }
      else if(nameid == "model_train"){
        this.$router.push({path:'page4', query:{idx:index}});
      }
    },

    selection(){

    var nameid = this.$route.query.nameId;
    if(nameid == "model_predict"){

      var obj = document.getElementById("select");
            var index = obj.selectedIndex;
            var value = obj.options[index].value;

            this.$axios.post('/api/pre_handle_func', [value])
            .then(function(response){
            document.getElementById("myImage1").src = 'data:;base64,' + response.data;
            })

      var obj = document.getElementById("select");
            var index = obj.selectedIndex;
            var value = obj.options[index].value;

            this.$axios.post('/api/post_handle_func', [value])
            .then(function(response){
            document.getElementById("myImage2").src = 'data:;base64,' + response.data;
            })


    }
    else if(nameid == "model_train"){

       var obj = document.getElementById("select");
             var index = obj.selectedIndex;
             var value = obj.options[index].value;

             this.$axios.post('/api/pre_treat_func', [value])
             .then(function(response){
             document.getElementById("myImage1").src = 'data:;base64,' + response.data;
             })

       var obj = document.getElementById("select");
             var index = obj.selectedIndex;
             var value = obj.options[index].value;

             this.$axios.post('/api/post_treat_func', [value])
             .then(function(response){
             document.getElementById("myImage2").src = 'data:;base64,' + response.data;
             })
    }
    },
  }
}

</script>
